<template>
  <div>
    <button @click="change">切换</button>
    <!-- <transition name="box">
      <div v-show="flag">内容</div>
    </transition>
    <div :class="mybox" >内容</div> -->

    <div class="animate__animated" :class="myanimated">你好</div>
    <div v-move class="box1">移动</div>
  </div>
</template>

<script>
//animate__backInDown
export default {
  data() {
    return {
      value: 10,
      flag: false,
      mybox: "box",
      myanimated: "animate__bounce",
    };
  },
  methods: {
    change() {
      this.myanimated = "animate__backInDown";
      this.flag = !this.flag;
      if (this.mybox == "box") {
        this.mybox = "box hide";
      } else {
        this.mybox = "box";
      }
    },
  },
};
</script>

<style>
.box1 {
  height: 100px;
  width: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
}
.box {
  background-color: red;
  transition: 1s;
}
.hide {
  background-color: white;
}

.box-enter-active,
.box-leave-active {
  transition: opacity 0.5s;
  background-color: red;
}
.box-enter, .box-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  background-color: yellow;
}
</style>
